{% include "../public/min-header.html" %}
<link href="/public/tool/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<script src="/public/tool/daterangepicker/moment.min.js" type="text/javascript"></script>
<script src="/public/tool/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<div class="wrapper">
    {% include "../public/breadcrumb.html" %}
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <div class="row">
                            <div class="col-md-10">
                                <form action="" method="get">
                                    <div class="col-xs-3">
                                        <a class="btn {{'btn-primary' if gap==7 else 'btn-default'}} margin" href="{{helper.pathFor('adrplgg',{gap:7})}}">最近7天</a>
                                        <a class="btn {{'btn-primary' if gap==30 else 'btn-default'}} margin" href="{{helper.pathFor('adrplgg',{gap:30})}}">最近30天</a>
                                    </div>
                                    <div class="col-xs-5">
                                        <div class="input-group margin">
                                            <div class="input-group-addon">
                                                选择时间  <i class="fa fa-calendar"></i>
                                            </div>
                                            <input type="text" class="form-control pull-right" name="timegap" value="{{timegap}}" id="start_time">
                                        </div>
                                    </div>
                                    <div class="col-xs-1"><input class="btn btn-block btn-info margin" type="submit" value="确定"></div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="box-body">
                        <table id="list-table" class="table table-bordered table-striped">
                            <thead>
                            <tr align="center">
                                <th></th>
                                <th>新增用户</th>
                                <th>活跃用户</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr align="center">
                                <td>今日</td>
                                <td>{{reg.today}}</td>
                                <td>{{login.today}}</td>
                            </tr>
                            <tr align="center">
                                <td>昨日</td>
                                <td>{{reg.yesterday}}</td>
                                <td>{{login.yesterday}}</td>
                            </tr>
                            <tr align="center">
                                <td>本周</td>
                                <td>{{reg.week}}</td>
                                <td>{{login.week}}</td>
                            </tr>
                            <tr align="center">
                                <td>上周</td>
                                <td>{{reg.lastweek}}</td>
                                <td>{{login.lastweek}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">活跃统计表</h3>
                        <div class="box-tools"></div>
                        <div class="box-tools pull-right">
                            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="chart">
                            <div id="statistics" style="height: 400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<script src="/public/js/echart/echarts.min.js" type="text/javascript"></script>
<script src="/public/js/echart/macarons.js"></script>
<script src="/public/js/echart/china.js"></script>
<script src="/public/admin/js/app.js" type="text/javascript"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('statistics'),'macarons');
    var res = {active:[{%for item in show_data%}{{item.act}},{%endfor%}],users:[{%for item in show_data%}{{item.users}},{%endfor%}],time:[{%for item in show_data%}'{{item.date}}',{%endfor%}]};//{$result};
    option = {
        title : {
            text: '活跃趋势'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['新增人数','活跃人数']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [{
            type : 'category',
            data : res.time
        }],
        yAxis : [
            {
                type : 'value',
                name : '人数',
                axisLabel : {
                    formatter: '{value} 人'
                }
            }
        ],
        series : [
            {
                name:'新增人数',
                type:'line',
                data:res.active
            },
            {
                name:'活跃人数',
                type:'line',
                data:res.users
            }
        ]
    };
    myChart.setOption(option);

    $(document).ready(function() {
        $('#start_time').daterangepicker({
            format:"YYYY-MM-DD",
            singleDatePicker: false,
            showDropdowns: true,
            minDate:'2017-01-01',
            maxDate:'2030-01-01',
            startDate:'2017-01-01',
            showWeekNumbers: false,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: true,
            ranges: {
                '今天': [moment(), moment()],
                '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '最近7天': [moment().subtract(6, 'days'), moment()],
                '最近30天': [moment().subtract(29, 'days'), moment()],
                '上一个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            opens: 'right',
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            locale : {
                applyLabel : '确定',
                cancelLabel : '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ],
                firstDay : 1
            }
        });
    });
</script>
{% include "../public/main-footer.html" %}